<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防抖与节流</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>防抖</h1>
<hr>

<div>
  <button id="bt1">未添加防抖功能</button>
  <br>
  <br>
  <button id="bt2">已添加防抖功能</button>
  <br>
</div>
<script>
  let timer = null

  $("#bt1").click(() => {
    //console.log("btn1 is clicked...")
    $.ajax({
      url: 'data.json',
      type: 'get',
      success: resp => console.log(resp)
    })
  });

  $("#bt2").click(() => {
    //console.log("btn2 is clicked...")
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      $.ajax({
        url: 'data.json',
        type: 'get',
        success: resp => console.log(resp)
      })
    }, 2000)
  });
</script>
</body>
</html>

